<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的基本使用</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        事件的基本使用：
            1、使用v-on:xxx 或 @xxx  绑定事件，其中xxx是事件名；
            2、事件的回调需要配置在methods对象中，最后会在vm上；
            3、methods中配置的函数，不要用箭头函数！否则this就不是vm了；
            4、methods中配置的函数,都是被Vue所管理的函数，this的指向是vm 或  组件实例对象；
            5、@click="demo" 和 @click="demo($event)"效果一致，但后者可以传参；

     -->



    <!--准备好一个容器-->
    <div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!-- 
        需求：点击按钮 弹出提示信息 “同学你好”
        v-on:  当...什么时候   v-on:click -- 当该元素被点击的时候   v-on:click="showInfo" -- 执行回调函数showInfo中的内容  v-on:  可以简写为@符
        showInfo这个回调函数，只有在data中才会找到并执行里面的内容，那么我们就在data中创建一个配置项 来创建这个回调函数
     -->
     <!-- <button v-on:click="showInfo">点我提示信息</button> -->
     <button @click="showInfo1">点我提示信息1(不传参)</button>
     <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。

    // 创建Vue实例
   const vm =  new Vue({
        el:'#root',
        data:{
            name:'天津大学'
        },
        methods:{
        // 在此配置项中去创建showInfo回调函数，不需要function 直接方法名（）{ 执行的内容}
         showInfo1(event) {
            // console.log(event.target.innerText);
                alert('同学你好!') 
            // console.log(this);  // 此处的this是vm
            },
         showInfo2(event,number) { // 回调函数如何传参
             console.log(event,number);
            // console.log(event.target.innerText);
                alert('同学你好！！') 
            // console.log(this);  // 此处的this是vm
            }

        }
    })
</script>
</html>
